<template>
	<div id="content">
		<div class="header">
			<div class="cell">
				<div class="panel">
					<el-backtop></el-backtop>
					<div v-for="(item,index) in route" @click="getContent(item)" class="panelitem">
						<span>{{cate[index]}}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="topic_list">
			<div v-for="(item,index) in articles" class="cell">
				<div class="show-list-item" >
					<span class="avator" >
						<a href=""></a>
					</span>
					<span class="left_panel">{{item.pub_date}}</span>
					<div @click="goToDetail(item)" class="topic_title" style="cursor:pointer">
						<span class="cente_panel">{{item.title}}</span>
					</div>
					<span class="right_panel">{{nickname[index]}} writed</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {getUsers} from 'network/home.js'
	
	export default{
		name:"Content",
		data(){
			return{
				cur_Id:1,
				cate:['全部','帖子','视频','婚姻','慕道','问答'],
				route:['/home','/category','/msg','/profile','/profile','/profile'],
				// nickname:[]
			}
		},
		methods:{
			goToDetail(item){
				this.cur_Id=item.Id,
				
				this.$router.push({ 
				        path:'/detail/'+this.cur_Id,
				      })
			},
			getContent(route){
				this.$router.push(route)
			},
			getCate(){
				this.$emit('getCate',)
			}
		},
		props:{
			articles: [],
			nickname:[],
		},
		// created(){
		// 	let len = this.articles.length
		// 	for(let i=0;i<len;i++)
		// 		getUsers(this.articles[i].author_id).then(res=>{
		// 				this.nickname.push(res.body.nickname)
		// 				console.log(this.nickname)
		// 		})
		// }
	}
</script>

<style scoped>
	.panelitem{
		cursor:pointer;
		display:inline-block;
		margin:0 10px ;
	}
	#content{
		width: 910px;
		height: ;
		background-color: #e1e1e1;
		margin-right: 350px;
	}
	.header{
		height: 40px;
		width: 100%;
		padding: 10px 0;
	}
	.header > .cell{
		position: relative;
		width: 100%;
	}
	.header > .cell >panel{
		/* display: block; */
		position: absolute;
		margin: 0 10px;
	}
	
	.cell{
		width: ;
		height: 40px;
		line-height: 50px;
		background-color: #fff;
		margin-bottom: 1px;
	}
	.topic_title{
		display: inline-block;
	}
	.panelitem:hover{
		color: #1E80FF;
	}
	.show-list-item{
		position: relative;
	}
	.left_panel{
		font-size: 10px;
		position: absolute;
		left: 15px;
	}
	.right_panel{
		font-size: 10px;
		position: absolute;
		right: 15px;
	}
</style>
